iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

Scratch 3 從入門到精通系列 第 27

Day27 ( 高級 ) 小畫家 ( 舞台上畫圖 )

  • 分享至 

  • xImage
  •  

小畫家 ( 舞台上畫圖 )

教學原文參考:小畫家 ( 舞台上畫圖 )

這篇文章會介紹,如何在 Scratch 3 裡使用多個角色造型、畫筆、重複無限次、更換造型、偵測碰到角色...等積木,實作一個可以在 Scratch 舞台上畫圖的小畫家功能。

相關文章參考:角色造型畫筆重複無限次更換造型偵測碰到角色

角色設定

在角色編輯區,刪除貓咪角色,使用「繪畫」功能繪製新的角色 ( 參考:造型與繪圖 )。

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

繪製一大一小的黑色圓形,小的圓形命名為「畫筆」,大的圓形命名為「black」( 黑色 )

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

用滑鼠在大的圓形按下右鍵,點選複製,就能複製大圓角色,複製角色後,將圓形改成紅色,命名為「red」

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

依此類推,建立 black、red、yellow、green、blue、white 和 clear ( 清除 ) 的圓形角色,作為點擊後,畫筆會更換顏色的顏料

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

畫筆角色造型設定

點擊「畫筆」角色,切換到「造型」頁籤,替畫筆角色製作六個不同顏色的造型 ( 形狀位置相同 ),分別是 black、red、yellow、green、blue 和 white ( 顏色與大圓的顏色接近或相同 )。

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

設定角色位置

調整圓形角色在舞台上的位置,使其看起來像下圖一樣。

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

如果擔心會不小心移動角色的位置,也可以替每個「大圓」角色加上「點擊綠旗」的程式積木,在點擊綠旗時設定擺放的位置。

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

積木程式原理

加入擴充功能的「畫筆」,點擊「畫筆」角色,設定一開始點擊綠旗的程式:

  • 清除筆跡、停筆。
  • 設定畫筆寬度為 10。
  • 設定畫筆預設顏色為黑色
  • 設定畫筆造型為 black 黑色畫筆

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

接著加入「用滑鼠畫圖」的程式:

  • 使用重複無限次積木。
  • 每次重複時,讓畫筆角色定位到滑鼠位置 ( 跟隨滑鼠移動 )。
  • 每次重複時,判斷是否按下滑鼠,如果按下滑鼠就下筆畫圖,放開滑鼠就停筆

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

完成後,切換到「專案頁面」,就能用滑鼠在舞台上畫圖。

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

新增另外一組點擊綠旗的程式,負責更換畫筆顏色:

  • 放入重複無限次積木。
  • 每次重複時,判斷如果碰到黑色大圓角色 ( black ):
    • 停筆。
    • 判斷如果按下滑鼠 ( 碰到黑色大圓 + 按下滑鼠 )。
    • 將畫筆顏色設定為黑色,造型換成黑色畫筆。
  • 每次重複時,判斷如果碰到紅色大圓角色 ( red ):
    • 停筆。
    • 判斷如果按下滑鼠 ( 碰到紅色大圓 + 按下滑鼠 )。
    • 將畫筆顏色設定為紅色,造型換成紅色畫筆。

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

依此類推,放入判斷碰到黃色 ( yellow )、綠色 ( green )、藍色 ( blue )、白色 ( white ) 和清除 ( clear ) 大圓角色的程式積木。

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

比較不同的是點擊「清除 ( clear ) 角色」的程式積木為「筆跡全部清除」。

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

完成效果

完成後,切換回「專案頁面」,就能開始在舞台上畫圖。

Scratch 3 教學 - 小畫家 ( 舞台上畫圖 )

範例解答

範例解答:小畫家 ( 舞台上畫圖 )

延伸練習

如果已經熟悉了小畫家 ( 舞台上畫圖 ) 的原理,還可以嘗試更多好玩的作法:

  • 增加更多顏色
  • 增加調整畫筆粗細的按鈕 ( 或使用變數滑桿 ) ( 解答 )

關於我

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,如果對我有點興趣(笑,可以與我聯繫,一起來做點有玩又有創意的東西吧!


上一篇
Day26 ( 高級 ) 放煙火 2 ( 爆炸效果 )
下一篇
Day28 ( 高級 ) 記錄畫圖軌跡
系列文
Scratch 3 從入門到精通46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言